<template>
  <div class="row">
    <div class="col-xs-12">
      <Portlet title="资质详情">
        <table class="table show-table" style="width: 100%">
          <tbody>
          <tr>
            <td width="20%">申请时间：</td>
            <td width="80%">{{detailData.applyTime | unixTimestampFilter}}</td>
          </tr>
          <tr>
            <td>申请账号：</td>
            <td>{{detailData.applyPhone}}</td>
          </tr>
          <tr>
            <td>公司名称：</td>
            <td>{{detailData.companyName}}</td>
          </tr>
          <tr>
            <td>统一社会信用代码：</td>
            <td>{{detailData.communityCode}}</td>
          </tr>
          <tr>
            <td>法定代表人：</td>
            <td>{{detailData.legalPerson}}</td>
          </tr>
          <tr>
            <td>公司住所：</td>
            <td>{{detailData.detailAddress}}</td>
          </tr>
          <tr>
            <td>公司服务热线：</td>
            <td>{{detailData.serviceHotline}}</td>
          </tr>
          <tr>
            <td>联系人姓名：</td>
            <td>{{detailData.contactsName}}</td>
          </tr>
          <tr>
            <td>联系人电话：</td>
            <td>{{detailData.contactsPhone}}</td>
          </tr>
          <tr>
            <td>营业执照：</td>
            <!--<img :src="imgUrl" style="width: 300px; height: 180px"/>-->
            <UploadImage v-model="businessLicense" :max="1" readonly></UploadImage>
          </tr>
          <tr>
            <td>道路运输许可证：</td>
            <!--<img :src="imgUrl" style="width: 300px; height: 180px"/>-->
            <UploadImage v-model="carriageTestify" :max="1" readonly style="width: 300px; height: 180px"></UploadImage>
          </tr>
          </tbody>
        </table>

        <el-col v-if = 'auditState == 0' class="text-center" :span="12" style="margin-bottom: 100px; margin-top: 30px">
          <el-row>
            <el-col class="text-center" :span="5" :offset="6">
              <el-button @click="noPass" style="width:100%">不通过</el-button>
            </el-col>
            <el-col class="text-center" :span="5" :offset="2">
              <el-button type="primary" :loading="loading" @click="pass" style="width:100%">通过</el-button>
            </el-col>
          </el-row>
        </el-col>

      </Portlet>

    </div>
  </div>
</template>
<script>
import {dotData} from '@/utils'
import {filterDataBaseDictionary, unixTimestampFilter} from '@/filters'
export default {
  name: 'approveDetail',
  filters: {
    filterDataBaseDictionary,
    unixTimestampFilter
  },
  data() {
    return {
      id: this.$route.params.id,
      detailData: {},
      businessLicense: [], // 营业执照
      carriageTestify: [], // 道路运输许可证
      auditState: 0
    }
  },
  created() {
    this.getDetail()
    console.log(this.$route.params.id, 'tttttt')
  },
  methods: {
    getDetail() {
      let url = '/ms-warehouse-order/trunk-audit/getTrunkAuditDetail'
      this.$ajax.get(url, {id: this.id}).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.detailData = dotData(response, 'data')
          this.auditState = this.detailData.auditState
          this.businessLicense = dotData(response, 'data.businessLicense').split(',')
          this.carriageTestify = dotData(response, 'data.carriageTestify').split(',')
        }
      })
    },
    pass() {
      // 通过 这里调通过的接口
      this.$ajax.post('/ms-warehouse-order/trunk-audit/auditTrunkCertificated', {id: this.id, auditState: 1}).then(response => {
        if (response.success) {
          this.getDetail()
          // 这里是否要设置关闭这个页面  是否要设置以下的弹窗提示
          this.$message({
            type: 'success',
            message: '已审核通过'
          })
        }
      })
    },
    noPass() {
      // 不通过
      this.$prompt('不通过理由', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[\s\S]{0,20}$/,
        inputPlaceholder: '不超过20个字!',
        inputErrorMessage: '字数超过限制'
      }).then(({ value }) => {
        // 这里调不通过的接口
        this.$ajax.post('/ms-warehouse-order/trunk-audit/auditTrunkCertificated', {id: this.id, auditState: 2, auditMemo: value}).then(response => {
          if (response.success) {
            this.getDetail()
            // 这里是否要设置关闭这个页面 是否要设置以下的弹窗提示
            this.$message({
              type: 'success',
              message: '已拒绝通过'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    }
  }
}
</script>
